<template>
	<view class="pages">
		<view class="header flex-row flex-al flex-sb">
			<view class="nav" @click="changeNav(0)">待确认</view>
			<view class="nav" @click="changeNav(1)">待付款</view>
			<view class="nav" @click="changeNav(2)">进行中</view>
			<view class="nav" @click="changeNav(3)">已完成</view>
			<view class="tip" :class="nav==0?'tip0':nav==1?'tip1':nav==2?'tip2':'tip3'"></view>
		</view>
		<view style="height: 87rpx;">

		</view>
		<view class="status0" v-if="nav==0">
			<image class="loding" src="/static/imgs/loding.png" v-if="!status0.length"></image>
			<view class="box flex-col flex-al" v-for="(item,i) in status0" :key="item.ordernum">
				<view class="flex-row flex-sb w100 box-header">
					<view class="header-left flex-row flex-al">
						<view class="flex-col header-title">
							<view>
								开往 {{item.stationdown.name||item.stationdown.address}}
							</view>
							<view>
								{{item.username}} {{item.phone}}
							</view>
						</view>
					</view>
					<view class="header-right">
						待管理员确认
					</view>
				</view>
				<view class="box-contant flex-col w100">
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							乘车人数：
						</view>
						<view class="contant-list-right">
							{{item.peoplenumber}}人
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							始发站点：
						</view>
						<view class="contant-list-right">
							{{item.stationup.name||item.stationup.address}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							定制用途：
						</view>
						<view class="contant-list-right">
							{{item.yongtu}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							发车时间：
						</view>
						<view class="contant-list-right">
							{{item.choosetime}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							下单时间：
						</view>
						<view class="contant-list-right">
							{{item.ordertime}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							订单编号：
						</view>
						<view class="contant-list-right">
							{{item.ordernum}}
						</view>
					</view>
				</view>
				<view class="box-bottom w100">
					<view hover-class="hover-btn" class="del shanchu" @click="del" v-bind:id="item.id">
						删除
					</view>
				</view>
			</view>
		</view>

		<view class="status1" v-if="nav==1">
			<image class="loding" src="/static/imgs/loding.png" v-if="!status1.length"></image>
			<view class="box flex-col flex-al" v-for="(item,i) in status1" :key="item.ordernum">
				<view class="flex-row flex-sb w100 box-header">
					<view class="header-left flex-row flex-al">
						<view class="flex-col header-title">
							<view>
								开往 {{item.stationdown.name||item.stationdown.address}}
							</view>
							<view>
								{{item.username}} {{item.phone}}
							</view>
						</view>
					</view>
					<view class="header-right green-color">
						{{item.payStatus==0?'未支付':item.payStatus==1?'已支付定金':'支付完成'}}
					</view>
				</view>
				<view class="box-contant flex-col w100">
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							乘车人数：
						</view>
						<view class="contant-list-right">
							{{item.peoplenumber}}人
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							始发站点：
						</view>
						<view class="contant-list-right">
							{{item.stationup.name||item.stationup.address}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							定制用途：
						</view>
						<view class="contant-list-right">
							{{item.yongtu}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							发车时间：
						</view>
						<view class="contant-list-right">
							{{item.choosetime}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							下单时间：
						</view>
						<view class="contant-list-right">
							{{item.ordertime}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							订单编号：
						</view>
						<view class="contant-list-right">
							{{item.ordernum}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							支付状态：
						</view>
						<view class="contant-list-right">
							未支付
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							定金金额：
						</view>
						<view class="contant-list-right">
							¥{{item.dingjin}}元
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							全款金额：
						</view>
						<view class="contant-list-right">
							¥{{item.jine}}元
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							已付金额：
						</view>
						<view class="contant-list-right">
							¥{{item.payMoney}}元
						</view>
					</view>
				</view>
				<view class="box-bottom w100">
					<view hover-class="hover-btn" class="del green-btn" v-bind:id="item.id" @click="payNow(item)">
						立即支付
					</view>
				</view>
			</view>
		</view>
		
		<view class="status2" v-if="nav==2">
			<image class="loding" src="/static/imgs/loding.png" v-if="!status2.length"></image>
			<view class="box flex-col flex-al" v-for="(item,i) in status2" :key="item.ordernum">
				<view class="flex-row flex-sb w100 box-header">
					<view class="header-left flex-row flex-al">
						<view class="flex-col header-title">
							<view>
								开往 {{item.stationdown.name||item.stationdown.address}}
							</view>
							<view>
								{{item.username}} {{item.phone}}
							</view>
						</view>
					</view>
					<view class="header-right green-color">
						
					</view>
				</view>
				<view class="box-contant flex-col w100">
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							乘车人数：
						</view>
						<view class="contant-list-right">
							{{item.peoplenumber}}人
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							始发站点：
						</view>
						<view class="contant-list-right">
							{{item.stationup.name||item.stationup.address}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							定制用途：
						</view>
						<view class="contant-list-right">
							{{item.yongtu}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							发车时间：
						</view>
						<view class="contant-list-right">
							{{item.choosetime}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							下单时间：
						</view>
						<view class="contant-list-right">
							{{item.ordertime}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							订单编号：
						</view>
						<view class="contant-list-right">
							{{item.ordernum}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							支付状态：
						</view>
						<view class="contant-list-right">
							未支付
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							定金金额：
						</view>
						<view class="contant-list-right">
							¥{{item.dingjin}}元
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							全款金额：
						</view>
						<view class="contant-list-right">
							¥{{item.jine}}元
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							已付金额：
						</view>
						<view class="contant-list-right">
							¥{{item.payMoney}}元
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100" v-if="(item.payType==0&&item.paytime3&&item.paytime1)||(item.payType==1&&item.paytime2)">
						<view class="contant-list-left">
							自动确认：
						</view>
						<view class="contant-list-right">
							发车时间开始后7个自然日自动确认
						</view>
					</view>
				</view>
				<view class="box-bottom w100">
					<view hover-class="hover-btn" @click="payWeikuan(item)" class="del green-btn" v-bind:id="item.id" v-if="item.payType==0&&!item.paytime3">
						支付尾款
					</view>
					<view hover-class="hover-btn" class="del green-btn" v-bind:id="item.id" v-if="false">
						已支付完成
					</view>
					<view hover-class="hover-btn" class="del green-btn" v-if="(item.payType==0&&item.paytime3&&item.paytime1)||(item.payType==1&&item.paytime2)" v-bind:id="item.id" @click="arrival(item)">
						确认到达
					</view>
				</view>
			</view>
		</view>
		
		<view class="status3" v-if="nav==3">
			<image class="loding" src="/static/imgs/loding.png" v-if="!status3.length"></image>
			<view class="box flex-col flex-al" v-for="(item,i) in status3" :key="item.ordernum">
				<view class="flex-row flex-sb w100 box-header">
					<view class="header-left flex-row flex-al">
						<view class="flex-col header-title">
							<view>
								开往 {{item.stationdown.name||item.stationdown.address}}
							</view>
							<view>
								{{item.username}} {{item.phone}}
							</view>
						</view>
					</view>
					<view class="header-right green-color">
						已完成
					</view>
				</view>
				<view class="box-contant flex-col w100">
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							乘车人数：
						</view>
						<view class="contant-list-right">
							{{item.peoplenumber}}人
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							始发站点：
						</view>
						<view class="contant-list-right">
							{{item.stationup.name||item.stationup.address}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							定制用途：
						</view>
						<view class="contant-list-right">
							{{item.yongtu}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							发车时间：
						</view>
						<view class="contant-list-right">
							{{item.choosetime}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							下单时间：
						</view>
						<view class="contant-list-right">
							{{item.ordertime}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							订单编号：
						</view>
						<view class="contant-list-right">
							{{item.ordernum}}
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							支付状态：
						</view>
						<view class="contant-list-right">
							未支付
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							定金金额：
						</view>
						<view class="contant-list-right">
							¥{{item.dingjin}}元
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							全款金额：
						</view>
						<view class="contant-list-right">
							¥{{item.jine}}元
						</view>
					</view>
					<view class="flex-row flex-al contant-list w100">
						<view class="contant-list-left">
							已付金额：
						</view>
						<view class="contant-list-right">
							¥{{item.payMoney}}元
						</view>
					</view>
				</view>
				<view class="box-bottom w100">
					<view hover-class="hover-btn" class="del gray-btn" v-bind:id="item.id">
						行程已结束
					</view>
				</view>
			</view>
		</view>
		
		
		<uni-popup ref="popup0" type="bottom">
			<view class="pop-bg flex-col flex-al">
				<view class="pop-title flex-row flex-al flex-sb">
					<view @click="popup0Close">取消</view>
					<view>选择支付方式</view>
					<view ></view>
				</view>
				<view class="yongtu flex-row flex-al flex-jc" hover-class="yongtu-hover" @click="payDingjin">
					¥{{payNowObj.dingjin}}支付定金
				</view>
				<view class="yongtu flex-row flex-al flex-jc" hover-class="yongtu-hover" @click="payJine">
					¥{{payNowObj.jine}}支付全款
				</view>
			</view>
		</uni-popup>	
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import HttpModule from "../../../module/httpModule.js"
	const httpModule = new HttpModule();
	export default {
		data() {
			return {
				nav: 0,
				status0: [],
				status1: [],
				status2: [],
				status3: [],
				payNowObj:{}
			}
		},
		async onLoad() {
			this.getList()
		},
		

		methods: {
			async del(e) {
				var _this=this;
				const id = e.target.id;
				console.log(id)
				uni.showModal({
					title: "提示",
					content: "你确定要删除吗？",
					success: (res) => {
						if (res.confirm) {
							httpModule.delBusOrder(id).then(res => {
								_this.getList()
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			popup0Close(){
				this.$refs.popup0.close();
			},
			async getList() {
				uni.showLoading({
					title: "加载中"
				})
				this.status0 = []
				this.status1 = []
				this.status2 = []
				this.status3 = []
				const data = await httpModule.getBusList();
				const list = data.data.getBusList;
				console.log(list)
				for (let i in list) {
					list[i].stationdown = JSON.parse(list[i].stationdown)
					list[i].stationup = JSON.parse(list[i].stationup)
					list[i].ordertime = new Date(parseInt(list[i].ordertime)).format("yyyy-MM-dd hh:mm")
					let choosetimeInit=Number(new Date(list[i].choosetime))
					console.log(choosetimeInit)
					list[i].zidongqueren =(new Date(choosetimeInit+7*24*60*60).format("yyyy-MM-dd hh:mm"))
					console.log(list[i].zidongqueren)
					if (list[i].status == 0) {
						this.status0.push(list[i]);
					}
					if (list[i].status == 1) {
						this.status1.push(list[i]);
					}
					if (list[i].status == 2) {
						this.status2.push(list[i]);
					}
					if (list[i].status == 3) {
						this.status3.push(list[i]);
					}
				}
				uni.hideLoading()
				this.list = list
			},
			async payDingjin(){
				var _this=this;
					// const ordernum = ctx.request.body.ordernum;
				 //    const ordername = ctx.request.body.ordername;
				 //    const total_fee = parseFloat(ctx.request.body.totalFee) * 100;
				 //    const attach = ctx.request.body.attach;
					
				const proPay=await httpModule.getMiniProgramPayParams({
					ordernum:this.payNowObj.dingjinNum,
					ordername:this.payNowObj.yongtu,
					totalFee:this.payNowObj.dingjin,
					attach:'定金'
				});
				const payPack=proPay.data.result;
				payPack.success=res=>{
					uni.showToast({
						icon:'none',
						title:'支付成功,下拉刷新查看'
					});
					_this.nav=2;
					this.$refs.popup0.close();
					_this.getList()
				}
				payPack.fail=res=>{
					uni.showToast({
						icon:'none',
						title:'支付失败'
					})
					this.$refs.popup0.close();
					_this.getList()
				}
				wx.requestPayment(payPack)
				
				
			},
			async arrival(item){
				var _this=this;
				uni.showModal({
					title:'您确认您已经到达目的地吗？',
					content:"确认到达之后无法取消，订单将结束。",
					cancelText:'点错了',
					confirmText:'我确认',
					confirmColor:'#ff1418',
					success:res=>{
						 if (res.confirm) {
						     httpModule.arrival({
						      ordernum:item.ordernum
						     }).then(data=>{
								 _this.changeNav(3)
								
							 });
						  } 
					}
				})
				
			},
			async payJine(){
				var _this=this;
				const proPay=await httpModule.getMiniProgramPayParams({
					ordernum:this.payNowObj.ordernum,
					ordername:this.payNowObj.yongtu,
					totalFee:this.payNowObj.jine,
					attach:'全款'
				});
				const payPack=proPay.data.result;
				payPack.success=res=>{
					uni.showToast({
						icon:'',
						title:'支付成功,下拉刷新查看'
					})
					_this.nav=2;
					this.$refs.popup0.close();
					_this.getList()
				}
				payPack.fail=res=>{
					uni.showToast({
						icon:'',
						title:'支付失败'
					})
					this.$refs.popup0.close();
					_this.getList()
					
				}
				wx.requestPayment(payPack)
			},
			async payWeikuan(item){
				var _this=this;
				this.payNowObj=item;
				const proPay=await httpModule.getMiniProgramPayParams({
					ordernum:this.payNowObj.weikuanNum,
					ordername:this.payNowObj.yongtu,
					totalFee:this.payNowObj.weikuan,
					attach:'尾款'
				});
				const payPack=proPay.data.result;
				payPack.success=res=>{
					uni.showToast({
						icon:'none',
						title:'支付成功,下拉刷新查看'
					})
					_this.nav=2;
					this.$refs.popup0.close();
					_this.getList()
				}
				payPack.fail=res=>{
					uni.showToast({
						icon:'none',
						title:'支付失败'
					})
					this.$refs.popup0.close();
					_this.getList()
					
				}
				wx.requestPayment(payPack)
			},
			async payNow(item){
				var _this=this;
				this.payNowObj=item;
				this.$refs.popup0.open();
				console.log(item);
			},
			changeNav(index) {
				var _this=this;
				this.nav = index
				_this.getList()
			}
		}
	}
</script>

<style lang="less" scoped>
	@w: 685rpx;
	.pop-bg {
		width: 750rpx;
		min-height: 637rpx;
		background: rgba(255, 255, 255, 1);
	
		.yongtu {
			width: @w;
			margin: 38rpx auto;
			height: 92rpx;
			background: rgba(26, 184, 148, 1);
			box-shadow: 0px 0rpx 22rpx 0rpx rgba(142, 242, 219, 1);
			border-radius: 10rpx;
			text-align: center;
			line-height: 92rpx;
			color: #fff;
			font-size: 30rpx;
			transition: all 200ms;
			
		}
		.yongtu-hover {
			transition: all 200ms;
			transform: scale(1.02);
		}
	
		.pop-title {
			width: @w;
			padding-top: 44rpx;
			padding-bottom: 44rpx;
	
			view {
	
				&:nth-child(1),
				&:nth-child(3) {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: rgba(26, 184, 148, 1);
					width: 100rpx;
				}
	
				&:nth-child(2) {
					font-size: 32rpx;
					width: 500rpx;
					text-align: center;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: bold;
					color: rgba(50, 50, 51, 1);
				}
			}
		}
	}
	.pages {
		box-sizing: border-box;
		min-height: 100vh;
		background: #eee;

		.status0,
		.status1,
		.status2,
		.status3{
			.loding {
				width: 384rpx;
				height: 235rpx;
				margin: 0 auto;
				margin-top: 150rpx;
			}

			.box {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 39rpx;
				padding-bottom: 20rpx;
				background: #fff;
				margin-top: 10rpx;
				
				.box-bottom {
					margin-top: 20rpx;
					&::before,
					&::after {
						content: '';
						clear: both;
						display: block;
					}
					view {
						float: right;
						padding: 0 25rpx;
						height: 46rpx;
						border-radius: 10rpx;
						text-align: center;
						line-height: 46rpx;
						font-size: 25rpx;

						.hover-btn {
							transform: scale(1.01);
						}

						margin-left: 25rpx;
						border: 1rpx solid #ddd;
						color: #ddd;
					}
					.green-btn{
						border: 1rpx solid rgba(26, 184, 148, 1);
						color:  rgba(26, 184, 148, 1);
					}
					.gray-btn{
						border: 1rpx solid rgba(219, 219, 219, 255);
						color:  rgba(219, 219, 219, 255);
					}

				}

				.box-contant {
					box-sizing: border-box;
					padding: 20rpx 0;
					font-size: 25rpx;
					color: rgba(135, 135, 135, 1);
					border-bottom: 1rpx solid #eee;

					.contant-list {
						margin-top: 6rpx;

						&:last-child {
							margin-bottom: 6rpx;
						}

						.contant-list-left {
							min-width: 132rpx;
						}
					}

				}

				.box-header {
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #eee;

					.header-right {
						font-size: 25rpx;
						color: #fff;
						color: rgba(192, 192, 192, 255);
					}

					.header-left {
						image {
							width: 54rpx;
							height: 54rpx;
							margin-right: 17rpx;
						}

						.header-title {
							view {
								&:first-child {
									font-size: 28rpx;
									font-weight: bolder;
									color: rgba(42, 42, 42, 1);
								}

								&:last-child {
									font-size: 25rpx;
									color: rgba(0, 0, 0, 1);
								}
							}
						}
					}

				}
			}

		}
		
		.header {
			background: #fff;
			width: 750rpx;
			height: 87rpx;
			// justify-content: space-around;
			position: fixed;
			top: 0;
			left: 0;
			box-sizing: border-box;
			padding: 0 39rpx;


			.tip {
				width: 147rpx;
				height: 9rpx;
				position: absolute;
				background: rgba(26, 184, 148, 1);
				transition: all 200ms;
			}

			.tip0 {
				left: 39rpx;
				bottom: 0;
			}

			.tip1 {
				left: 210rpx;
				bottom: 0;
			}

			.tip2 {
				left: 387rpx;
				bottom: 0;
			}

			.tip3 {
				left: 567rpx;
				bottom: 0;
			}

			.nav {
				width: 147rpx;
				height: 87rpx;
				line-height: 87rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				color: rgba(0, 0, 0, 1);
			}
		}
	}
	.green-color{
		color:  rgba(26, 184, 148, 1)!important;
	}
	.shanchu{
		color: #F47676!important;
		border: 1rpx solid #F47676!important;
	}
</style>
